<template>
    <div>
    <div >
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/install' }" style="font-size:20px">安装详情</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'detailed' }" style="font-size:20px">详细安装</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
    <el-form :inline="true" :model="query">
    
        <el-form-item>
          <el-input
            v-model="query.userName"
            placeholder="请输入用户姓名关键字"
            :clearable="true"
          ></el-input>
          
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="query.roleName"
            placeholder="请输入角色关键字"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
          <el-col :span="30">
          <el-button type="primary" @click="loadInst"
            ><i class="el-icon-search"></i
          ></el-button>
          <el-button type="success" @click="(dialog.addshow=true)"
            >添加</el-button
          >
          <el-button type="success" @click="reset">重置</el-button>
          <el-button type="success" @click="exportExcel">导出数据</el-button>
          </el-col>
          
         </el-row>
        </el-form-item>
      </el-form>
      <!-- ----------------------表格--------------------------- -->
      <el-table :data="installList"  style="width: 100%" class="box">
            <el-table-column prop="installId" label="安装编号" width="100"></el-table-column>
            <el-table-column prop="userName" label="用户姓名" width="150"></el-table-column>
            <el-table-column prop="hsStatus" label="处理状态" width="150"> </el-table-column>
            <el-table-column prop="troopsName" label="小组名称" width="150"></el-table-column>
            <el-table-column prop="roleName" label="角色名称" width="150"></el-table-column>
            <el-table-column prop="installDate" label="申请时间" width="130"></el-table-column>
            <el-table-column prop="installNum" label="申请数量" width="150"></el-table-column>
            <el-table-column prop="areaName" label="安装区域" width="130"></el-table-column>
            <el-table-column prop="installDesc" label="安装描述" width="200"></el-table-column>
        <el-table-column label="操作"  width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row.installId)" > 编辑</el-button>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row.installId)">
              <el-button
              slot="reference"
              size="mini"
              type="danger"           
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
      <!-- -----------------------添加dialog------------------------------------------------------ -->
      <el-dialog title="添加记录" :visible.sync="dialog.addshow" width="30%">
        <el-form :model="form">
          <el-form-item label="用户姓名" :label-width="formLabelWidth">
            <el-select v-model="addForm.userId" placeholder="请选择姓名">
            <el-option
              v-for="(user, index) in userList"
              :key="index"
              :label="user.userName"
              :value="user.userId"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="处理状态" :label-width="formLabelWidth">
            <el-select v-model="addForm.hsId" placeholder="请选择状态">
            <el-option
              v-for="(handle, index) in handleList"
              :key="index"
              :label="handle.hsStatus"
              :value="handle.hsId"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="小组名称" :label-width="formLabelWidth">
            <el-select v-model="addForm.troopsId" placeholder="请选择小组">
            <el-option
              v-for="(troops, index) in troopsList"
              :key="index"
              :label="troops.troopsName"
              :value="troops.troopsId"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="角色名称" :label-width="formLabelWidth">
            <el-select v-model="addForm.roleId" placeholder="请选择角色">
            <el-option
              v-for="(role, index) in roleList"
              :key="index"
              :label="role.roleName"
              :value="role.roleId"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="申请时间" :label-width="formLabelWidth">
            <el-input v-model="addForm.installDate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="申请数量" :label-width="formLabelWidth">
            <el-input v-model="addForm.installNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="安装区域" :label-width="formLabelWidth">
            <el-select v-model="addForm.areaId" placeholder="请选择区域">
            <el-option
              v-for="(area, index) in areaList"
              :key="index"
              :label="area.areaName"
              :value="area.areaId"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="安装描述" :label-width="formLabelWidth">
            <el-input v-model="addForm.installDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="restForm">取 消</el-button>
          <el-button type="primary" @click="addIns">提 交</el-button>
        </div>
      </el-dialog>
       <!-- -----------------------修改dialog------------------------------------------------------ -->
      <el-dialog title="修改记录" :visible.sync="dialog.updateshow" width="30%">
        <el-form :model="form">
          <el-form-item label="用户姓名" :label-width="formLabelWidth">
            <el-select v-model="updateForm.userId" placeholder="请修改姓名">
            <el-option
              v-for="(user, index) in userList"
              :key="index"
              :label="user.userName"
              :value="user.userId"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="处理状态" :label-width="formLabelWidth">
            <el-select v-model="updateForm.hsId" placeholder="请修改状态">
            <el-option
              v-for="(handle, index) in handleList"
              :key="index"
              :label="handle.hsStatus"
              :value="handle.hsId"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="小组名称" :label-width="formLabelWidth">
            <el-select v-model="updateForm.troopsId" placeholder="请修改小组">
            <el-option
              v-for="(troops, index) in troopsList"
              :key="index"
              :label="troops.troopsName"
              :value="troops.troopsId"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="角色名称" :label-width="formLabelWidth">
            
            <el-select v-model="updateForm.roleId" placeholder="请修改角色" v-if="roleId=3">
            <el-option
              v-for="(role, index) in roleList"
              :key="index"
              :label="role.roleName"
              :value="role.roleId"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="申请时间" :label-width="formLabelWidth">
            <el-input v-model="updateForm.installDate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="申请数量" :label-width="formLabelWidth">
            <el-input v-model="updateForm.installNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="安装区域" :label-width="formLabelWidth">
            <el-select v-model="updateForm.areaId" placeholder="请修改区域">
            <el-option
              v-for="(area, index) in areaList"
              :key="index"
              :label="area.areaName"
              :value="area.areaId"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="安装描述" :label-width="formLabelWidth">
            <el-input v-model="updateForm.installDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog.updateshow = false">取 消</el-button>
          <el-button type="primary" @click="updateIns">提 交</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        installList:[],
        areaList:[],
        roleList:[],
        userList:[],
        troopsList:[],
        handleList:[],
        page: {
        pageSizes: [5, 10, 20, 50, 100], //下拉列表中的数组
        total: 0, //一共有多少条数据
      },
        dialog: {
          addshow: false,
          updateshow:false,
        },
        query:{
          currentPage: 1, //代表当前页
          pageSize: 5, //代表每页显示多少条数据
          userName:"",
          roleName:""
        },
        addForm: {},
        updateForm: {},
      };
    },
    methods: {
      reset()  {
     this.query.userName="";
     this.query.roleName="";
     this.loadInst();
    },    
      exportExcel() {      
      this.$axios
        .post("installs/exportExcel", this.query,{responseType: 'blob'})
        .then((res) => {
          let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名          
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let dom = document.createElement("a");
          dom.style.display = "none";
          dom.href = url;
          dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
          document.body.appendChild(dom);
          dom.click();
          // 释放内存
          dom.parentNode.removeChild(dom)
          window.URL.revokeObjectURL(dom.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
      loadInst() {
      this.$axios.post("/installs/query",this.query).then((res) => {
        this.installList = res.data.data.list;
        this.page.total = res.data.data.total;
      });
    },    
    loadArea(){
      this.$axios.get("area").then((res) => {
        this.areaList = res.data.data.list;
      });
    },
    loadRole(){
      this.$axios.get("role").then((res) => {
        this.roleList = res.data.data.list;
      });
    },
    loadUser(){
      this.$axios.get("user").then((res) => {
        this.userList = res.data.data.list;
      });
    },
    loadTroops(){
      this.$axios.get("troops").then((res) => {
        this.troopsList = res.data.data.list;
      });
    },
    loadHandle(){
      this.$axios.get("handle").then((res) => {
        this.handleList = res.data.data.list;
      });
    },
      addIns() {
        this.$axios.post("/installs", this.addForm).then((res) => {
          if(res.data.code==200){
              this.restForm();
              this.loadInst();//重新加载数据
          }
        });
      },
      updateIns() {
        this.$axios.put("/installs", this.updateForm).then((res) => {
          if(res.data.code==200){
              this.dialog.updateshow = false;//关掉模态框
              this.loadInst();//重新加载数据
          }
        });
      },
      handleEdit(id){
          //显示修改模态框
          this.dialog.updateshow = true;
          //查询对应的数据
          this.$axios.get("/installs/"+id).then((res) => {
          this.updateForm = res.data.data.list;

        });
      },
      handleSizeChange(val) {
      //当每页数据改变时
      this.query.pageSize = val;
      this.loadInst();
    },
    restForm(){
      this.dialog.addshow = false;//关掉模态框
      this.addForm={
      }
    },
    handleCurrentChange(val) {
      //当点击页码时
      this.query.currentPage = val;
      this.loadInst();
    },
      handleDelete(id){        
          //查询对应的数据
          this.$axios.delete("/installs/"+id).then((res) => {
              if(res.data.code==200){ 
             this.$message.success("删除成功");           
              this.loadInst();//重新加载数据
          }
        });
      },
    },
    mounted() {
      this.loadInst();
      this.loadRole();
      this.loadArea();
      this.loadTroops();
      this.loadUser();
      this.loadHandle();
    },
  };
  </script>
  <style>
  .box{
    margin-top: 0%;
  } 
  .d1 {
    font-size: 50px;
  }
  </style>
  